<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2024-08-09 11:02:43
 * @Description: 
-->
<template>
    <el-dialog :modelValue="props.addToTypeDia.visible" title="新增类型" center :before-close="closeTransferDiaDialog"
        @open="dialogOpenHandler" width="1050px">
        <el-row>
            <el-col :span="24" class="type-transfer">
                <el-transfer v-model="tableData" filterable filter-placeholder="算法查询" :titles="['所有算法', '已选算法']"
                    :button-texts="['移除', '添加']" :data="allData" v-loading="tableLoading" />
            </el-col>
        </el-row>
        <template #footer>
            <div style=" width: 100%; display: flex;justify-content: center;">
                <el-button size="small" type="primary" @click="submitForm()">
                    确定
                </el-button>
                <el-button size="small" @click="resetForm()">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { defineComponent, reactive, computed, ref, toRefs, onMounted, watch,  } from "vue";
import HttpService from "@/api/api";
import { ElMessage, ElMessageBox, } from "element-plus";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import * as _ from "lodash";

const props = defineProps({
    addToTypeDia: Object
});


let tableData = ref([])
let tableLoading = ref(false)
let originData = ref([])
const emits = defineEmits(['dialogSubmit', 'closeTransferDiaDialog']);

const getAlgorithm = function () {
    let params = {
        page_index: '',
        page_size: "",
        keyword: '',
        type: props.addToTypeDia.algorithmTypeId
    };
    console.log(props.addToTypeDia.algorithmTypeId)
    tableData.value.length = 0;
    originData.value.length = 0;
    tableLoading.value = true
    HttpService.algorithmManage.getAlgorithms(
        params,
        (res) => {
            setTimeout(() => {
                if (res.status == 200) {
                    res.data.data.map((item, index) => {
                        tableData.value.push(item.id);
                        originData.value.push(item.id);
                    });
                    tableLoading.value = false
                } else {
                    console.log("获取信息失败" + res);
                    tableLoading.value = false
                }
            }, 300)
        },
        (error) => {
            console.log(error);
            tableLoading.value = false
        }
    );
};


let allData = ref([])

/* const filterMethod = (query, item) => {
    return item.initial.toLowerCase().includes(query.toLowerCase())
} */

const dialogOpenHandler = async function () {
    allData.value.length = 0
    props.addToTypeDia.originData.forEach((item) => {
        allData.value.push(item)
    })
    await getAlgorithm()
}

const submitForm = async () => {
    let submitData = {
        typeId: props.addToTypeDia.algorithmTypeId,
        originData: originData.value,
        tableData: tableData.value
    }
    emits('dialogSubmit', submitData)
    closeTransferDiaDialog()
}

const resetForm = () => {
    closeTransferDiaDialog()
}

var view = reactive({
    height: window.innerHeight,
});

const closeTransferDiaDialog = function () {
    emits('closeTransferDiaDialog')
}

onMounted(() => {

});
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.type-transfer {
    .el-transfer {
        width: 1100px;

        .el-transfer-panel {
            width: 400px !important;

            .el-transfer-panel__body {
                height: 500px;
            }
        }
    }
}
</style>